<template>
  <div>
    <el-row>
      <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-light">
          <el-divider></el-divider>
		  <div style="display: inline-block;">
			<span>标题：</span>
			<el-input
				style="width: 250px"
				placeholder="请输入标题"
				v-model="title"
			></el-input>
			&nbsp;&nbsp;&nbsp;
		  </div>
          <div style="display: inline-block;">
			<span>标签：</span>
			<el-select
				class="el-input__diatext"
				style="width:250px;"
				v-model="selectTag"
				multiple
				collapse-tags
				placeholder="请选择"
			>
				<el-option
				v-for="tag in tags"
				:key="tag.id"
				:label="tag.name"
				:value="tag.id"
				>
				</el-option>
			</el-select>
		  </div>
		  
         
          <br />
		  <div style="margin-top: 30px;">
			<span>概述：</span>
			<div style="width: 55%;margin-left:50px;">
				<el-input
					type="textarea"
					:rows="3"
					placeholder="请输入内容"
					v-model="descp"
				>
				</el-input>
			</div>
			
		  </div>
          
          <el-divider></el-divider>

          <!-- :toolbarsFlag=false  :subfield=false defaultOpen="preview" -->
          <div class="mavonEditor">
            <no-ssr>
              <mavon-editor :toolbars="markdownOption" v-model="handbook" />
            </no-ssr>
          </div>
          <el-divider></el-divider>
          <div style="text-align: center; display: block">
            <el-button type="primary" v-on:click="submit()" round
              >提交</el-button
            >
          </div>

          <el-divider></el-divider>
        </div>
      </el-col>
      <el-col :span="2"
        ><div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Edit",
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
      handbook: "#### how to use mavonEditor in nuxt.js",
      title: '',
      descp: '',
      tags: [],
      selectTag: [],
    };
  },
  created() {
    this.queryData();
  },
  methods: {
    submit() {
    //   console.log("提交");
	//   console.log(this.selectTag);
	//   console.log(JSON.stringify(this.selectTag));
	  var data ={
		  tagId: this.selectTag.length==0?'':JSON.stringify(this.selectTag),
          title: this.title,
          descp: this.descp,
          context: this.handbook,
	  }
      this.axios.post("http://120.77.213.195:8001/blog/editSubmit", data).then((response) => {
          console.log(response.data);
		  if(response.data.code != 0){
			  this.$message.error(response.data.err);
		  }
		  if(response.data.code == 0){
			this.$message('评论成功');
			this.$router.push("/main/blog");
		  }
      });
    },
    queryData() {
      this.axios.post(`http://120.77.213.195:8001/blog/tag`).then((response) => {
        console.log(response);
        if (response.data.code == 0) {
          this.tags = response.data.tags;
        }
      });
    },
  },
};
</script>

<style scoped>
.mavonEditor {
  width: 100%;
  height: 100%;
}

/* 布局 */
.el-row {
	
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
/* .bg-purple-dark {
    background: #99a9bf;
  } */
/* .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  } */
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>